<template>
  <div id="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref(null);

const drawShape = () => {
  const leftShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topYAxis, bottomYAxis, xAxis } = shape;
      const WIDTH = 30; // 增加柱体宽度
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [xAxis - WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p2 = [xAxis - WIDTH, bottomYAxis];
      const p3 = [xAxis, bottomYAxis];
      const p4 = [xAxis, topYAxis];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    },
  });

  const rightShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topYAxis, bottomYAxis, xAxis } = shape;
      const WIDTH = 30; // 增加柱体宽度
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [xAxis, topYAxis];
      const p2 = [xAxis, bottomYAxis];
      const p3 = [xAxis + WIDTH, bottomYAxis];
      const p4 = [xAxis + WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    },
  });

  const topShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topYAxis, xAxis } = shape;
      const WIDTH = 30; // 增加柱体宽度
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [xAxis, topYAxis];
      const p2 = [xAxis + WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p3 = [xAxis, topYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
      const p4 = [xAxis - WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    },
  });

  echarts.graphic.registerShape("leftShape", leftShape);
  echarts.graphic.registerShape("rightShape", rightShape);
  echarts.graphic.registerShape("topShape", topShape);
  
  initChart();
};

const initChart = () => {
  const myChart = echarts.init(chart.value);
  myChart.resize({
    height:370,
    width:300
  })
  myChart.setOption({
    grid: {
        // left: '10%',  // 左边距
        right: '45%', // 右边距
        // top: '10%',   // 上边距
        // bottom: '10%' // 下边距
    },
    title: {
      text: '总人员数',
      left: 'left',
      textStyle: {
        fontSize: 14,
      },
    },
    xAxis: {
      type: "category",
      data: ['总人数'],
      axisLabel: {
        color: "#222",
        fontSize: 11,
      },
    },
    yAxis: {
      type: "value",
      max: 120,
      axisLabel: {
        color: "#222",
      },
      splitLine: {
        show: false,
      },
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        type: "custom",
        renderItem(params, api) {
          const yAxisCoord = api.coord([0, api.value(0)]);
          const topYAxis = yAxisCoord[1];
          const xAxis = api.coord([api.value(0), 0])[0];
          const bottomYAxis = api.coord([0, 0])[1];
          const color = api.value(1) ? ['#66cc66', '#b2e8b2'] : ['#cc99ff', '#e0c2ff'];
          const label = api.value(1) ? '总人数: 120人' : '正在开展项目\n人数: 20人';

          return {
            type: "group",
            children: [
              {
                type: "leftShape",
                shape: {
                  topYAxis,
                  xAxis,
                  bottomYAxis,
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: color[0] },
                    { offset: 0.5, color: color[1] },
                  ]),
                },
              },
              {
                type: "rightShape",
                shape: {
                  topYAxis,
                  xAxis,
                  bottomYAxis,
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: color[0] },
                    { offset: 1, color: color[1] },
                  ]),
                },
              },
              {
                type: "topShape",
                shape: {
                  topYAxis,
                  xAxis,
                  bottomYAxis,
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: color[0] },
                    { offset: 0.5, color: color[1] },
                  ]),
                },
              },
              {
                type: "text",
                style: {
                  text: label,
                  x: xAxis + 40, // 将标签移动到柱体右侧
                  y: (topYAxis + bottomYAxis) / 2, // 居中对齐
                  textAlign: 'left', // 设置文字靠左对齐
                  textVerticalAlign: 'middle',
                  fontSize: 12,
                  color: '#333',
                },
              },
            ],
          };
        },
        data: [[120, 1], [20, 0]],
        barWidth: '60%', // 增加柱体宽度
      },
    ],
  });
};

onMounted(() => {
  drawShape();
});
</script>

<style scoped>
#chart {
  width: 100%;
}
</style>
